<!-- 装修营销组件：营销文章 -->
<template>
  <view>
    <div class="min-h-30px" style="padding: 0 15px 15px">
      <div class="flex">
        <div class="month">
          <div>{{ time.month }}月</div>
          <div>{{ time.day }}</div>
        </div>
        <div class="block-title">
          {{ property.title }}
        </div>
      </div>
      <div
        class="articles-top-box"
        v-if="['oneCol', 'twoCol', 'thrCol'].includes(property.layoutType)"
      >
        <div
          v-if="['oneCol', 'twoCol', 'thrCol'].includes(property.layoutType)"
          :style="{
            backgroundImage: `url(${articles1[0]?.picUrl})`,
            backgroundSize: `100% 100%`,
            backgroundPosition: `center center`,
          }"
          @click="goDetail(articles1[0])"
        >
          <div>
            <span class="no"
              ><span class="tabler--hexagon-number-1-filled" style="color: #fd5f40"></span
            ></span>
            <div class="title" v-if="articles1[0]?.title.length < 11">{{
              articles1[0]?.title || ''
            }}</div>
            <div class="title" v-else>{{ articles1[0]?.title.slice(0, 9) + '...' }}</div>
          </div>
        </div>
        <div
          v-if="['twoCol', 'thrCol'].includes(property.layoutType)"
          :style="{
            backgroundImage: `url(${articles1[1]?.picUrl})`,
            backgroundSize: `100% 100%`,
            backgroundPosition: `center center`,
          }"
          @click="goDetail(articles1[1])"
        >
          <div>
            <span class="no"><span class="tabler--hexagon-number-2-filled"></span></span>
            <div class="title" v-if="articles1[1]?.title.length < 11">{{
              articles1[1]?.title || ''
            }}</div>
            <div class="title" v-else>{{ articles1[1]?.title.slice(0, 9) + '...' }}</div>
          </div>
        </div>
        <div
          v-if="['thrCol'].includes(property.layoutType)"
          :style="{
            backgroundImage: `url(${articles1[2]?.picUrl})`,
            backgroundSize: `100% 100%`,
            backgroundPosition: `center center`,
          }"
          @click="goDetail(articles1[2])"
        >
          <div>
            <span class="no"><span class="tabler--hexagon-number-3-filled"></span></span>
            <div class="title" v-if="articles1[2]?.title.length < 11">{{
              articles1[2]?.title || ''
            }}</div>
            <div class="title" v-else>{{ articles1[2]?.title.slice(0, 9) + '...' }}</div>
          </div>
        </div>
      </div>
      <div
        v-for="(item, index) in articles2"
        :key="item.id"
        class="bottom-box"
        @click="goDetail(item)"
      >
        <div>
          <span class="no">{{ articles1.length + index + 1 }} </span>
          <span class="title">{{ item.title }}</span>
          <span class="browseCount">{{ item.browseCount }}</span>
          <span class="label ml-3">
            <span v-if="item.config.isHot"
              ><Icon icon="fa-brands:hotjar" style="color: #e60f0f"
            /></span>
          </span>
        </div>
      </div>
    </div>
  </view>
</template>
<script setup>
  import ArticleApi from '@/sheep/api/promotion/article';

  const props = defineProps({
    data: {
      type: Object,
      default: {},
    },
    styles: {
      type: Object,
      default() {},
    },
  });

  const state = reactive({
    content: '',
  });

  const time = {
    month: dayjs().format('MM'),
    day: dayjs().format('DD'),
  };

  // 商品列表
  const articles1 = ref([]);
  const articles2 = ref([]);

  const property = ref();

  onMounted(async () => {
    // const { data } = await ArticleApi.getArticle(props.data.id);
    console.log(props.data);
    init(props.data);
    property.value = props.data;
    // state.content = data.content;
  });

  const goDetail = (row) => {
    console.log('goDetail', row.id);
    uni.navigateTo({
      url: `/pages/public/richtext?id=${row.id}&title=${row.title}`,
    });
  };

  const init = async (v) => {
    const { articleConfig, layoutType } = v;
    console.log(articleConfig, layoutType);
    const fixedIds = articleConfig.filter((item) => item.id).map((item) => item.id);
    const fixedData = await ArticleApi.getArticlePage({ articleIds: fixedIds });
    const allArticles = await ArticleApi.getArticlePage({
      pageSize: 10,
      pageNo: 1,
      status: 0,
      title: '',
      categoryId: property.categoryId || 5,
    });
    console.log('allArticles', allArticles);
    articles1.value = [];
    articles2.value = [];
    articleConfig.forEach((configItem, index) => {
      let data = configItem.isAuto
        ? allArticles.data.list.shift()
        : fixedData?.data.list?.find((item) => item.id == configItem.id);
      if (!data) return;
      data.config = configItem;
      if (['oneCol', 'twoCol', 'thrCol'].includes(layoutType) && index === 0) {
        articles1.value.push(data);
      } else if (['twoCol', 'thrCol'].includes(layoutType) && index === 1) {
        articles1.value.push(data);
      } else if (['thrCol'].includes(layoutType) && index === 2) {
        articles1.value.push(data);
      } else {
        articles2.value.push(data);
      }
    });
    console.log(articles1);
    console.log(articles2);
  };
</script>
<style lang="scss" scoped>
  .month {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 40px;
    height: 45px;
    border-radius: 0 0 10px 10px;
    text-align: center;
    background-image: linear-gradient(100deg, #ecc5c6, #fdf7db);
    margin-bottom: 6px;

    view:nth-child(1) {
      font-size: 12px;
    }
    view:nth-child(2) {
      font-weight: bold;
      font-size: 16px;
      margin-top: -3px;
    }
  }
  .block-title {
    font-weight: bold;
    margin-top: 12px;
    margin-left: 12px;
  }
  .articles-top-box {
    width: 100%;
    display: flex;
    height: 130px;
    justify-content: space-between;
    > view {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 6px;
      .title {
        position: absolute;
        color: #fff;
        bottom: 0;
        padding: 12px;
      }
      .no {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 24px;
      }
    }
    > view:nth-child(2) {
      margin: 0 12px;
    }
  }
  .bottom-box {
    margin: 12px 0;
    .no,
    .browseCount {
      color: #666;
    }
    .title {
      margin: 0 6px;
    }
  }
  .tabler--hexagon-number-1-filled {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fd5f40' d='M10.425 1.414a3.33 3.33 0 0 1 3.216 0l6.775 3.995c.067.04.127.084.18.133l.008.007l.107.076a3.223 3.223 0 0 1 1.284 2.39l.005.203v7.284c0 1.175-.643 2.256-1.623 2.793l-6.804 4.302c-.98.538-2.166.538-3.2-.032l-6.695-4.237A3.226 3.226 0 0 1 2 15.502V8.217a3.21 3.21 0 0 1 1.65-2.808zm.952 5.803l-.084.076l-2 2l-.083.094a1 1 0 0 0 0 1.226l.083.094l.094.083a1 1 0 0 0 1.226 0l.094-.083l.293-.293V16l.007.117a1 1 0 0 0 1.986 0L13 16V8l-.006-.114c-.083-.777-1.008-1.16-1.617-.67z'/%3E%3C/svg%3E");
  }
  .tabler--hexagon-number-2-filled {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fca848' d='M10.425 1.414a3.33 3.33 0 0 1 3.216 0l6.775 3.995c.067.04.127.084.18.133l.008.007l.107.076a3.223 3.223 0 0 1 1.284 2.39l.005.203v7.284c0 1.175-.643 2.256-1.623 2.793l-6.804 4.302c-.98.538-2.166.538-3.2-.032l-6.695-4.237A3.226 3.226 0 0 1 2 15.502V8.217a3.21 3.21 0 0 1 1.65-2.808zM13 7h-3l-.117.007a1 1 0 0 0 0 1.986L10 9h3v2h-2l-.15.005a2 2 0 0 0-1.844 1.838L9 13v2l.005.15a2 2 0 0 0 1.838 1.844L11 17h3l.117-.007a1 1 0 0 0 0-1.986L14 15h-3v-2h2l.15-.005a2 2 0 0 0 1.844-1.838L15 11V9l-.005-.15a2 2 0 0 0-1.838-1.844z'/%3E%3C/svg%3E");
  }
  .tabler--hexagon-number-3-filled {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fad078' d='M10.425 1.414a3.33 3.33 0 0 1 3.216 0l6.775 3.995c.067.04.127.084.18.133l.008.007l.107.076a3.223 3.223 0 0 1 1.284 2.39l.005.203v7.284c0 1.175-.643 2.256-1.623 2.793l-6.804 4.302c-.98.538-2.166.538-3.2-.032l-6.695-4.237A3.226 3.226 0 0 1 2 15.502V8.217a3.21 3.21 0 0 1 1.65-2.808zM13 7h-2l-.15.005A2 2 0 0 0 9 9a1 1 0 0 0 1.974.23l.02-.113L11 9h2v2h-2l-.133.007c-1.111.12-1.154 1.73-.128 1.965l.128.021L11 13h2v2h-2l-.007-.117A1 1 0 0 0 9 15a2 2 0 0 0 1.85 1.995L11 17h2l.15-.005a2 2 0 0 0 1.844-1.838L15 15v-2l-.005-.15a1.988 1.988 0 0 0-.17-.667l-.075-.152l-.019-.032l.02-.03a2.01 2.01 0 0 0 .242-.795L15 11V9l-.005-.15a2 2 0 0 0-1.838-1.844z'/%3E%3C/svg%3E");
  }
</style>
